ESLint

ESLint 是一个插件化的 javascript 代码检测工具

ESLint 配置文件

npm install -g eslint

然后在项目生成配置文件

# 命令在用户目录中生成一个配置文件
eslint --init 
# 然后按需选择配置

然后会生成一份配置文件

// ESlint配置文件
module.exports = {
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

ESLint 配置规则

参考资料规则配置列表

注意！！！

"off" 或 0 - 关闭规则 "warn" 或 1 - 将规则视为一个警告 "error" 或 2 - 将规则视为一个错误

只能用数字

rules: {
  "规则名": [规则值, 规则配置]
}

例如

"rules": {
    // 例如这个就是自动把 == 修复成 ===
    "eqeqeq": ["error", "always", {"null": "ignore"}]
}

用 Prettier 格式化代码

参考资料使用Prettier统一格式化项目代码参考资料漫漫江雪--VSCode的Vue插件Vetur设置

注意：Vue 有一个 vetur 插件用来格式化，其就是基于 Prettier 的

{
    "vetur.format.options.tabSize": 4,
    "vetur.format.options.useTabs": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false,    //不加分号
            "singleQuote": true  //用单引号
        }
    }
}

用来做代码格式化，有了 Prettier 之后，它能去掉原始的代码风格，确保团队的代码使用统一相同的格式

安装

# 使用npm
npm install --save-dev --save-exact prettier
# or globally
npm install --global prettier

使用

创建一个 .prettierrc 文件

常用设置

{
    // tab缩进大小,默认为2
    "tabWidth": 4,
    // 使用tab缩进，默认false
    "useTabs": false,
    // 使用分号, 默认true
    "semi": false,
    // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    "singleQuote": false,
    // 行尾逗号,默认none,可选 none|es5|all
    // es5 包括es5中的数组、对象
    // all 包括函数对象等所有可选
    "TrailingCooma": "all",
    // 对象中的空格 默认true
    // true: { foo: bar }
    // false: {foo: bar}
    "bracketSpacing": true,
    // JSX标签闭合位置 默认false
    // false: <div
    //          className=""
    //          style={{}}
    //       >
    // true: <div
    //          className=""
    //          style={{}} >
    "jsxBracketSameLine": false,
    // 箭头函数参数括号 默认avoid 可选 avoid| always
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    "arrowParens": "avoid"
    
}

整合到 Vue Cli

{
  ....
  "devDependencies": {
      ...
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1"
  }
}

配置 .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

配置 babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};

配置 .prettierrc

{
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid"
}

常见问题

vscode的use strict无报错

需要引入 ESLint 插件支持，所以需要先在项目上添加这个ESLint支持

# 先创建npm包
npm init
# 再添加管理
eslint --lint

Eslint 中 no-undef 的检查报错

这个是 ESLint 中配置了检查是否可用全局变量如果要添加全局变量直接在 ESLint 中增加一个 global 配置，用于标记哪些可以使用的全局对象

"globals":{
  "document": true,
  "localStorage": true,
  "window": true
}

Eslint 中 require 没有找到这个是因为没有在eslintrc 里导入 node 环境，直接在 env 这项里加上就好了
'env': {
    'browser': true,
    'node': true,
    'es2020': true
},
更多环境参考：官方文档

Reference

参考设置详解VSCode 格式化不符合预期的问题参考设置 vscode 配置vue+vetur+eslint+prettier自动格式化功能参考设置 vscode, eslint, prettier, vetur冲突及解决（有用）参考资料使用 VSCode + ESLint 实践前端编码规范参考资料官方中文文档

ESLint 配置文件​

ESLint 配置规则​

用 Prettier 格式化代码​

整合到 Vue Cli​

常见问题​

Reference​